<template>
  <div>
    <div class="league-round">
      <div class="league-round-block"></div>
      <div class="league-round-text">中超联赛第{{roundIndex}}轮</div>
    </div>
    <div class="schedule-table">
      <el-table
              v-loading="loading"
              element-loading-text="正在加载赛程..."
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              :data="roundBattle"
              :show-header="false"
              height="424px"
              @cell-mouse-enter="enterRow"
              @cell-mouse-leave="leaveRow"
              style="width: 100%">
        <el-table-column
                prop="matchTime"
                label="日期"
                width="326">
          <template slot-scope="scope">
            <span class="battle-time">{{scope.row.matchTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="battle"
                label="主队"
                width="140">
          <template slot-scope="scope">
            <div class="team-cell">
              <span class="myColumn" @click="enterTeam(scope.row.homeTeamId)">
                {{scope.row.homeTeam}}
              </span>
              <img class="team-logo" :src="scope.row.homeTeamImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="battle"
                label="比分"
                width="70">
          <template slot-scope="scope">
            <div class="battle-score">
              {{scope.row.score}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="battle"
                label="客队"
                width="196">
          <template slot-scope="scope">
            <div class="team-cell">
              <img class="team-logo" :src="scope.row.awayTeamImg" alt="">
              <span class="myColumn" @click="enterTeam(scope.row.awayTeamId)">{{scope.row.awayTeam}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="stadium"
                label="场地"
                width="300">
          <template slot-scope="scope">
            <div class="stadium">
              <img  class="stadium-logo" src="../../../assets/image/common/stadium.png" alt="">
              <span class="battle-time">{{scope.row.stadium}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop=""
                label="比赛报告"
                width="48">
          <template slot-scope="scope">
            <img @click="enterMatch(scope.row.matchId)" class="match-report" src="../../../assets/image/common/airPlane.svg" alt="">
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ScheduleTable",
    props:{
      roundBattle:{
        type:Array,
        default(){
          return []
        }
      },
      roundIndex:{
        type: Number,
        default() {
          return 1;
        }
      }
    },
    watch:{
      roundBattle:{
        handler(newBattle){
          this.loading = false
        },
      },
    },
    data(){
      return {
        loading:true
      }
    },
    methods:{
      //鼠标进入当前单元格
      enterRow(row, column, cell, event){
        //获取当前单元格所在的父元素cell.parentElement
        //为父元素添加类名hover-linear-gradient，这个class可以设置背景渐变
        //这个class在css中利用穿透提前定义
        // console.log(cell);
        cell.parentElement.classList.add('hover-linear-gradient');
        //找到所在行的父元素下的第5个子元素(即最后一个小飞机单元格)
        const airPlane_column = cell.parentElement.childNodes[5].querySelector('.match-report')
        //添加类，同样在css部分提前定义类悬浮的效果为小飞机往右偏移10px
        airPlane_column.classList.add('hover-match-report');
      },
      //鼠标移除当前单元格
      leaveRow(row, column, cell, event){
        //移除高亮的类
        cell.parentElement.classList.remove('hover-linear-gradient');
        const airPlane_column = cell.parentElement.childNodes[5].querySelector('.match-report')
        //移除小飞机的类
        airPlane_column.classList.remove('hover-match-report');
      },
      //点击球队，进入单个球队页面
      enterTeam(homeTeamId){
        // console.log(homeTeamId)
        // 命名的路由
        this.$router.push({ name: 'singleTeam', params: { teamId: homeTeamId }})
      },
      //点击小飞机，进入比赛报告
      enterMatch(matchId){
        this.$router.push({ name: 'matchReport', params: { matchId: matchId }})
      },
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .league-round {
    /*float: left;*/
    display: flex;
    justify-content: flex-start;
    width: 190px;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    font-weight: bold;
    /*background-color: red;*/
    margin: 10px 0 0 20px;
  }
  .league-round-block {
    width: 7%;
    height: 100%;
    background-color: #16C79A;
  }
  .league-round-text {
    margin-left: 15px;
  }
  .schedule-table {
    width: 75%;
    margin:10px auto 0;
  }
  .team-cell {
    display: flex;
    width: 120px;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    /*background-color: red;*/
  }
  .team-logo {
    width: 25px;
    height: 25px;
  }
  .stadium {
    display: flex;
    align-items: center;
  }
  .stadium-logo {
    width: 30px;
    height: 30px;
  }
  .battle-time {
    font-size: 20px;
    font-weight: bold;
  }
  .battle-score {
    display: inline-block;
    color: #1A936F;
    font-size: 22px;
    font-weight: bold;
    width: 50px;
    height: 30px;
    /*letter-spacing: 5px;*/
    /*margin: auto;*/
    text-align: center;
    line-height: 30px;
    /*background-color: #B500FE;*/
  }
  .schedule-table /deep/ .el-table td {
    padding: 8px 0 ; /*no*/
    background-color: #F1F6F9;
    border-bottom:1px solid white ;

  }
  .schedule-table /deep/ .is-leaf {
    padding: 8px 0 ; /*no*/
  }
  .schedule-table /deep/ .hover-linear-gradient {
    background-image: linear-gradient(to left,rgba(16,199,164,0.1),rgba(114,214,191,0.5),rgba(134,179,211,0.5));
    cursor: pointer;
  }
  .schedule-table /deep/ .el-table tbody tr:hover>td {
    background-color: transparent
  }
  .match-report {
    width: 30px;
    height: 30px;
    /*margin-left: 10px;*/
  }
  .schedule-table /deep/ .hover-match-report {
    margin-left: 10px;
    cursor: pointer;
  }
</style>